<template>
  <div style="display: flex;">
  <div class="cascader">
    <el-cascader
      placeholder="您可以尝试输入您想要查询的类别"
      :options="options"
      :props="props"
      filterable
      v-model="findparams.categoryId"
      @change="getTableData"
      style="width: 260px;"
    />
  </div>
    <el-form-item style="margin-left: 40vw;" label="商品搜索：">
  <div style="display: flex;">
        <el-input v-model="findparams.keyword" @input="getTableData" placeholder="输入商品名称进行查询"></el-input>
      </div>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column width="200px" label="商品编号">
      <template #default="scoped">
        <el-button text @click="drawerShow(scoped.row.id)">{{scoped.row.no}}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="商品名称" width="700" />
    <el-table-column prop="createTime" label="上架时间" width="auto" />
       <el-table-column prop="state" label="推送管理" width="auto">
      <template #default="scoped">
        <el-button type="success" v-if="scoped.row.recommend === 1" @click="changeState(scoped.row.id,scoped.row.recommend,'rec')">取消</el-button>
        <el-button type="primary" v-else @click="changeState(scoped.row.id,scoped.row.recommend,'rec')">推送</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="state" label="状态管理" width="auto">
      <template #default="scoped">
        <el-button type="success" v-if="scoped.row.state === 1" @click="changeState(scoped.row.id,scoped.row.state,'sta')">下架</el-button>
        <el-button type="danger" v-else @click="changeState(scoped.row.id,scoped.row.state,'sta')">上架</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
  <el-drawer
  v-model="drawer.show"
  title="商品信息"
  direction="ltr"
  class="drawer"
  :beforeClose="handleClose">
    <Detail
    v-if="drawer.show"
    :id="drawer.id">
    </Detail>
  </el-drawer>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import path from './path'
import Detail from './detail.vue'
// 接收类别级联选择相关
const options = ref([])
const props = {
  // 控制是否支持多选
  multiple: false,
  emitPath: false,
  label: 'name',
  value: 'id',
  children: 'children',
  expandTrigger: 'click'
}

// 接受组要数据
let tableData = ref({})
// 控制抽屉是否出现
const drawer = reactive({ 
  show: false,
  id:null
})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 14
})
const findparams = reactive({
  categoryId:null,
  keyword:null
})

// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams.keyword != null){
    params.keyword = findparams.keyword
  }
  if(findparams.categoryId != null){
    params.categoryId = findparams.categoryId
  }
  get(findparams.keyword || findparams.categoryId ? path.find : path.list,params,content => {
    tableData.value = content
  })
}

getCategory()
function getCategory(){
  get('/category/list',{},content => {
    options.value = content
    options.value.push({  
       id: 0,
       value: null,  
       name: '全部商品',  
    });
    console.dir(options)
  })
}

let changeState = (id,state,key) => {
  let text = ''
  if(key === 'sta'){
    text = state ? '确定要启用下架商品么？' : '确定要下架商品么？'
  } else {
    text = state ? '确定要取消推送该商品么？' : '确定要推送该商品么？'
  }
  ElMessageBox.confirm(text,'警告',{
    type:'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(()=>{
      post(key === 'sta' ? path.fixState : path.recommend,{id,state,key},content =>{
        getTableData()
      })
  }).catch(()=>{})
}

function drawerShow(id){
  drawer.show = true
  drawer.id = id
}
</script>

<style scoped lang='scss'>

</style>